<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="true"
		:auto="false" :hideEmptyView="false">
		<view slot="top">
			<z-nav-bar backState="1000">积分商城</z-nav-bar>
		</view>
		<view  v-show="!isShowSkeleton">
			<view class="u-p-t-30 u-p-l-30 u-p-r-30">
				<u-swiper :list="bannerList" bgColor="#FFFFFF" @click="handleNavBanner" :current="current" circular></u-swiper>
			</view>
			<view class="u-m-t-30 u-m-l-30 u-m-r-30 point-bg">
				<view class="u-flex">
					<view class="u-flex-8">
						<text class="u-font-32 u-m-r-20">可用积分</text>
						<u-count-to :duration="countDuration" :startVal="0" :endVal="currentPoint" color="#000000" fontSize="24" bold decimals="0" separator=","></u-count-to>
					</view>
					<view class="u-flex-4 u-text-right" @click="handlePointRule">
						<text class="rule">积分规则</text>
					</view>
				</view>
				<view class="u-flex">
					<view class="u-m-t-30 u-flex" @click="handlePointRecord">
						<u-icon name="coupon-fill" size="22"></u-icon>
						<text class="u-font-24 u-m-l-10">积分记录</text>
					</view>
					<view class="u-m-t-30 u-m-l-30 u-flex" @click="handlePointOrder">
						<u-icon name="order" size="22"></u-icon>
						<text class="u-font-24 u-m-l-10">积分订单</text>
					</view>
				</view>
				
			</view>
			
			<view class="bg-white u-m-r-30 u-m-l-30 u-p-l-30 u-p-r-30" style="border-radius: 0rpx 0rpx 30rpx 30rpx;">
				<u-scroll-list indicatorWidth="0">
					<view v-for="(item, index) in pointRecommendList" :key="index" class="u-m-r-20 u-m-t-40" @click="handleDetail(item)">
						<view class="bg-white b-r-30" style="width: 200rpx;">
							<view>
								<image :src="item.coverImage" mode="aspectFill" style="height: 200rpx;width: 100%; border-radius: 30rpx 30rpx 0rpx 0rpx;"></image>
							</view>
							<view class="u-p-t-10">
								<view class="u-line-2">
									<text>{{item.spuTitle}}</text>
								</view>
								<view class="text-money text-bold">
									<u-count-to :duration="countDuration" :startVal="0" :endVal="item.point" color="#FFB143" fontSize="16" bold decimals="0" separator=","></u-count-to>
									<text class="u-font-22 u-m-l-10" style="opacity: 0.5;">积分</text>
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			
			<view class="u-m-l-10 u-m-r-10">
				<u-tabs :list="tabs" :current="tabCurrent" lineColor="#FFB143" :activeStyle="{color: '#FFB143'}" lineWidth="30" @change="handleTabChange"></u-tabs>
			</view>
			<view>
				<view class="u-flex u-m-l-30 u-m-r-30 u-m-t-30" v-for="(listItem, index) in pointMallGoodsDataList" :key="index">
					<view class="u-flex-1 bg-white b-r-30" :class="{'u-m-r-15': index1 == 0, 'u-m-l-15': index1 == 1}" v-for="(item, index1) in listItem" :key="index1" @click="handleDetail(item)">
						<view>
							<image :src="item.coverImage" mode="aspectFill" style="width: 100%; height:310rpx; border-radius: 30rpx 30rpx 0rpx 0rpx;"></image>
						</view>
						<view class="u-m-t-20 u-m-l-20 u-m-r-20 u-line-2">
							<text>{{item.spuTitle}}</text>
						</view>
						<view class="u-m-l-20 u-m-r-20 u-m-b-20 text-money">
							<u-count-to :duration="countDuration" :startVal="0" :endVal="item.point" color="#FFB143" fontSize="18" bold decimals="0" separator=","></u-count-to>
							<text class="u-font-22 u-m-l-10" style="opacity: 0.5;">积分</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<Rule ref="ruleDialog"></Rule>
		<skeleton v-if="isShowSkeleton"></skeleton>
	</z-paging>
</template>

<script>
	import {jumpTypeEnum, registerTypeEnum} from '@/common/const.js'
	import {getBanner} from '@/api/home.js'
	import {mapGetters} from 'vuex'
	import {getPointRecommendList, getPointSpuCategoryList, getPointSpuPageByCategoryId} from '@/api/point.js'
	import {Skeleton} from '@/components/skeleton/point_mall.vue'
	import Rule from '@/pages_one/components/rule/index.vue'
	
	export default{
		data(){
			return{
				registerTypeEnum,
				countDuration:200,
				bannerList: [],
				
				tabs: [],
				
				dataList:[],
				pointMallGoodsDataList:[],
				
				activityList:[],
				current:0,
				tabCurrent:0,
				
				pointRecommendList:[],
				pointSpuCategoryList:[],
				
				requestParams:{
					categoryId:''
				},
				
				isShowSkeleton:true
			}
		},
		watch:{
			tabCurrent(val){
				if(val == 0){
					// 全部
					this.requestParams.categoryId = ''
				} else {
					let data = this.pointSpuCategoryList[val]
					this.requestParams.categoryId = data.id
				}
				
				this.reload()
			}
		},
		onLoad() {
			this.init()
		},
		onShareAppMessage(res) {
			let invitedCode = this.userInfo.invitedCode
			let type = 'home'
			let url = `/pages/main/index?invitedCode=${invitedCode}&type=${type}&registerType=${registerTypeEnum.share_friend}`
			console.log(url)
			return {
				title: '伊利高个子母婴专卖店',
				path: url
			}
		},
		onShareTimeline(res){
			let invitedCode = this.userInfo.invitedCode
			let type = 'home'
			let url = `/pages/main/index?invitedCode=${invitedCode}&type=${type}&registerType=${registerTypeEnum.share_friend_circle}`
			console.log(url)
			return {
				title: '伊利高个子母婴专卖店',
				path: url
			}
		},
		computed:{
			...mapGetters(['isLogin', 'userInfo']),
			
			currentPoint(){
				if(this.isLogin){
					return this.userInfo.shopUserInfo.pointBalance
				} else {
					return 0
				}
			}
		},
		components:{
			Skeleton,
			Rule
		},
		methods:{
			
			/**
			 * 初始化
			 */
			async init(){
				this.isShowSkeleton = true
				// 判断分享状态
				this.shareMenuStatus()
				// 获取轮播图
				await this.loadBanner()
				// 获取推荐列表
				await this.loadPointRecommendList()
				// 加载分类
				await this.loadPointSpuCategoryList()
				
				this.reload()
				
				this.isShowSkeleton = false
			},
			
			/**
			 * 判断是否可以分享
			 */
			shareMenuStatus(){
				if(this.isLogin){
					console.log("打开分享")
					uni.showShareMenu({
						menus: ['shareAppMessage', 'shareTimeline']
					})
				} else {
					console.log("关闭分享")
					uni.hideShareMenu({
						
					})
				}
			},
			
			/**
			 * 重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 查询数据
			 */
			queryList(pageNo, pageSize){
				this.requestParams.current = pageNo
				this.requestParams.size = pageSize
				
				getPointSpuPageByCategoryId(this.requestParams).then(res=>{
					if(pageNo == 1){
						this.dataList = []
						this.pointMallGoodsDataList = []
					}
					let data = res.data.records
					data.forEach(item=>{
						if(item.bannerImages){
							let images = JSON.parse(item.bannerImages)
							if(images.length > 0){
								// 获取sku封面
								if(!item.hasOwnProperty('coverImage')){
									this.$set(item, 'coverImage', images[0].materialUrl)
								} else {
									item.coverImage = images[0].materialUrl
								}
							}
						} else {
							this.$set(item, 'coverImage', '')
						}
					})
					this.dataList = this.dataList.concat(data);
					let rows = null
					for(let i = 0; i < data.length; i++){
						let mod = i % 2
						if(mod == 0){
							rows = []
							rows.push(data[i])
							this.pointMallGoodsDataList.push(rows)
						} else {
							rows.push(data[i])
						}
					}
					this.$refs.paging.complete(data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
				
				if(this.isLogin){
					// 重新获取用户信息
					this.$store.dispatch("updateUserInfo")
				}
			},
			
			
			/**
			 * 加载轮播图
			 */
			loadBanner(){
				return new Promise(resolve=>{
					getBanner().then(res=>{
						this.activityList = res.data
						this.activityList.forEach(item=>{
							item.bannerImage = JSON.parse(item.bannerImage)
							if(item.bannerImage.length > 0){
								this.bannerList.push(item.bannerImage[0].materialUrl)
							}
						})
						resolve()
					})
				})
			},
			
			/**
			 * 加载积分商品推荐
			 */
			loadPointRecommendList(){
				return new Promise(resolve=>{
					getPointRecommendList().then(res=>{
						let data = res.data
						data.forEach(spu=>{
							if(spu.bannerImages){
								let images = JSON.parse(spu.bannerImages)
								if(images.length > 0){
									// 获取sku封面
									if(!spu.hasOwnProperty('coverImage')){
										this.$set(spu, 'coverImage', images[0].materialUrl)
									} else {
										spu.coverImage = images[0].materialUrl
									}
								}
							}
						})
						this.pointRecommendList = data
						resolve()
					})
				})
			},
			
			/**
			 * 加载分类
			 */
			loadPointSpuCategoryList(){
				return new Promise(resolve=>{
					getPointSpuCategoryList().then(res=>{
						let data = res.data
						data.unshift({
							id:'',
							categoryName:'推荐'
						})
						data.forEach(item=>{
							this.tabs.push({
								name: item.categoryName
							})
						})
						this.pointSpuCategoryList = data
						resolve()
					})
				})
			},
			
			
			handleDetail(item){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/points_mall/detail?id=${item.id}`, false)
			},
			
			/**
			 * 积分规则
			 */
			handlePointRule(){
				this.$nextTick(()=>{
					this.$refs.ruleDialog.init()
				})
			},
			
			/**
			 * 积分记录
			 */
			handlePointRecord(){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/points/record', true)
			},
			
			/**
			 * 积分订单
			 */
			handlePointOrder(){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, '/pages_one/points_order/list', true)
			},
			
			/**
			 * 点击活动跳转
			 */
			handleNavBanner(index){
				const item = this.activityList[index]
				if(item.navType == '1'){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/goods/detail?spuId=${item.spuId}&skuId=${item.skuId}`, false)
				} else if(item.navType == '2'){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/equity/detail?id=${item.spuId}`, false)
				}
			},
			
			/**
			 * 切换分类
			 */
			handleTabChange(e){
				this.tabCurrent = e.index
			},
		}
	}
</script>

<style>
	/* page{
		background-color: #FFFFFF;
	} */
</style>

<style scoped>
	.point-bg{
		background-image: linear-gradient(to right, #FFCF7C, #FFB455, #FF9D34);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 20rpx 0rpx 40rpx 60rpx;
	}
	
	.rule{
		background-color: #000000;
		color: #FFFFFF;
		padding: 10rpx 20rpx 10rpx 30rpx;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		font-size: 22rpx;
	}
</style>